<template>
	<xbc-message-system v-if="message.type == 'system'" :message="message" />
	<xbc-message-comment v-else-if="message.type == 'comment'" :message="message" />
	<view v-else class="chat-message flex-row" :class="{reverse: isReverse && isSenderThemselve}">
		<xbc-avatar class="chat-message-avatar" :src="avatar" />
		<view class="chat-message-info">
			<view class="chat-message-time">
				<text></text>
				<text>{{ message.createTime }}</text>
			</view>
			<view class="chat-message-wrap flex-row">
				<text v-if="isSending" class="iconfont icon-loading"></text>
				<text v-if="isFailed" @click="resendMessage" class="iconfont icon-refresh"></text>
				<text v-if="config?.isSetRead && isSenderThemselve && (!isSending && !isFailed)" class="chat-message-read">{{ message.isRead ? '已读' : '未读' }}</text>
				<xbc-message-location v-if="message.type == 'location'" :message="message" />
				<xbc-message-card v-if="message.type == 'card'" :message="message" />
				<xbc-message-file v-if="message.type == 'file'" :message="message" />
				<xbc-message-image v-if="message.type == 'image'" :message="message" @load="onImageLoad" />
				<xbc-message-video v-if="message.type == 'video'" :message="message" />
				<xbc-message-audio v-if="message.type == 'audio'" :message="message" />
				<xbc-message-goods v-if="message.type == 'goods'" :message="message" />
				<xbc-message-order v-if="message.type == 'order'" :message="message" />
				<xbc-message-text v-if="message.type == 'text'" :message="message" />
			</view>
		</view>
	</view>
	<xbc-message-history v-if="message.showHistory" :config="config" />
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useMessage } from '@/hooks/useMessage'
import XBCCS from 'xbccs'

const emit = defineEmits(['imageLoad'])
const props = defineProps({
	config: { type: Object, default: () => { } },
	message: { type: Object, default: () => { } },
	isReverse: { type: Boolean, default: true },  // 是否控制消息的方向
})
const { isSending, isFailed, isSenderThemselve, avatar } = useMessage(props)

// 图片加载完毕
function onImageLoad() {
	emit('imageLoad', props.message)
}

// 重新发送消息
function resendMessage() {
	// 抛出事件，重发逻辑在editor组件内处理
	XBCCS.emit('message-resend', props.message)
}
</script>

<style lang="scss" scoped>
@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.chat-message {
	padding: 20rpx 30rpx;
	align-items: flex-start;
	justify-content: flex-start;
	
	&-read {
		display: inline-block;
		min-width: 32px;
		color: #666;
		font-size: 13px;
		text-align: right;
		align-self: flex-end;
		margin-right: 10px;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	}

	&-info {
		max-width: 80%;
	}
	
	&-avatar {
		margin-right: 20rpx;
	}
	
	&-wrap {
		width: fit-content;
		align-items: flex-end;

		.iconfont {
			margin-right: 10rpx;
			justify-self: flex-end;
			
			&.icon-loading {
				animation: rotation 2s linear infinite;
			}

			&.refresh {
				color: red;
				font-weight: bold;
			}
		}
	}

	&-name {
		color: #666;
		font-size: 28rpx;
		text-align: left;
		margin-bottom: 10rpx;
		transform: translateY(-6rpx);
	}
	
	&-time {
		color: #666;
		font-size: 24rpx;
		text-align: left;
		margin-bottom: 6rpx;
		transform: translateY(-2rpx);
	}

	&.reverse {
		flex-direction: row-reverse;

		.chat-message-time {
			text-align: right;
		}

		.chat-message-wrap {
			float: right;
		}

		.chat-message-avatar {
			margin-left: 10px;
			margin-right: 0;
		}
	}
}
</style>